<div class="ui two column relaxed stackable grid">
  <div class="column">
    <div class="ui list">
      <div class="item">
        <div class="ui top aligned avatar image">
          <img src="/images/wireframe/square-image.png">
        </div>
        <div class="content">
          <div class="header">Header</div>
          Description
          <div class="list">
            <div class="item">
              <i class="right triangle icon"></i>
              <div class="content">
                <a class="header">Sub Header</a>
                <div class="description">Sub Description</div>
              </div>
            </div>
            <div class="item">
              <i class="right triangle icon"></i>
              <div class="content">
                <a class="header">Sub Header</a>
                <div class="description">Sub Description</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="ui top aligned avatar image">
          <img src="/images/wireframe/square-image.png">
        </div>
        <div class="content">
          <div class="header">Header</div>
          Description
          <div class="list">
            <div class="item">
              <i class="right triangle icon"></i>
              <div class="content">
                <a class="header">Sub Header</a>
                <div class="description">Sub Description</div>
              </div>
            </div>
            <div class="item">
              <i class="right triangle icon"></i>
              <div class="content">
                <a class="header">Sub Header</a>
                <div class="description">Sub Description</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="ui divided very relaxed list">
      <div class="item">
        <i class="star icon"></i>
        <div class="content">
          <div class="header">Header</div>
          Description
        </div>
      </div>
      <div class="item">
        <i class="star icon"></i>
        <div class="content">
          <div class="header">Header</div>
          Description
        </div>
      </div>
      <div class="item">
        <i class="star icon"></i>
        <div class="content">
          <div class="header">Header</div>
          Description
        </div>
      </div>
    </div>

    <div class="ui divided very relaxed animated list">
      <div class="item">
        <div class="ui top aligned avatar image">
          <img src="/images/wireframe/square-image.png">
        </div>
        <div class="content">
          <div class="header">Header</div>
          Description
        </div>
      </div>
      <div class="item">
        <div class="ui top aligned avatar image">
          <img src="/images/wireframe/square-image.png">
        </div>
        <div class="content">
          <div class="header">Header</div>
          Description
        </div>
      </div>
      <div class="item">
        <div class="ui top aligned avatar image">
          <img src="/images/wireframe/square-image.png">
        </div>
        <div class="content">
          <div class="header">Header</div>
          Description
        </div>
      </div>
    </div>

  </div>

  <div class="column">
    <div class="ui bulleted link list">
      <a class="item">Link</a>
      <a class="item">Link</a>
      <a class="item">Link</a>
      <a class="item">Link</a>
      <a class="item">Link</a>
    </div>

    <div class="ui selection list">
      <a class="item">Selection</a>
      <a class="item">Selection</a>
      <a class="item">Selection</a>
      <a class="item">Selection</a>
      <a class="item">Selection</a>
    </div>

    <div class="ui bulleted list">
      <div class="item">
        <div class="content">
          <div class="header">Header</div>
          Description
        </div>
        <div class="list">
          <div class="item">
            Sub-header
          </div>
          <div class="item">
            Sub-header
          </div>
          <div class="item">
            Sub-header
          </div>
        </div>
      </div>
      <div class="item">
        <div class="content">
          <div class="header">Header</div>
          Description
        </div>
      </div>
      <div class="item">
        <div class="content">
          <div class="header">Header</div>
          Description
        </div>
      </div>
    </div>

    <div class="ui ordered list">
      <a class="item">Getting Started</a>
      <a class="item">Introduction</a>
      <div class="item">
        <a>Languages</a>
        <div class="list">
          <a class="item">HTML</a>
          <a class="item">Javascript</a>
          <a class="item">CSS</a>
        </div>
      </div>
      <a class="item">Review</a>
    </div>
  </div>
</div>

<div class="ui hidden divider"></div>

<div class="ui horizontal list">
  <div class="item">
    <div class="ui top aligned avatar image">
      <img src="/images/wireframe/square-image.png">
    </div>
    <div class="content">
      <div class="header">Header</div>
      Description
    </div>
  </div>
  <div class="item">
    <div class="ui top aligned avatar image">
      <img src="/images/wireframe/square-image.png">
    </div>
    <div class="content">
      <div class="header">Header</div>
      Description
    </div>
  </div>
  <div class="item">
    <div class="ui top aligned avatar image">
      <img src="/images/wireframe/square-image.png">
    </div>
    <div class="content">
      <div class="header">Header</div>
      Description
    </div>
  </div>
</div>

<div class="ui hidden divider"></div>

<div class="ui divided relaxed horizontal list">
  <div class="item">
    <div class="ui top aligned avatar image">
      <img src="/images/wireframe/square-image.png">
    </div>
    <div class="content">
      <div class="header">Header</div>
      Description
    </div>
  </div>
  <div class="item">
    <div class="ui top aligned avatar image">
      <img src="/images/wireframe/square-image.png">
    </div>
    <div class="content">
      <div class="header">Header</div>
      Description
    </div>
  </div>
  <div class="item">
    <div class="ui top aligned avatar image">
      <img src="/images/wireframe/square-image.png">
    </div>
    <div class="content">
      <div class="header">Header</div>
      Description
    </div>
  </div>
</div>

<div class="ui hidden divider"></div>

<div class="ui ordered horizontal list">
  <div class="item">
    <img class="ui avatar image" src="/images/wireframe/square-image.png">
    <div class="content">
      <div class="header">Steve Jobes</div>
      50 Points
    </div>
  </div>
  <div class="item">
    <img class="ui avatar image" src="/images/wireframe/square-image.png">
    <div class="content">
      <div class="header">Stevie Feliciano</div>
      44 Points
    </div>
  </div>
  <div class="item">
    <img class="ui avatar image" src="/images/wireframe/square-image.png">
    <div class="content">
      <div class="header">Jenny Hess</div>
      11 Points
    </div>
  </div>
</div>